import { Menu,Button,Layout,Card,Input,Checkbox,Progress } from 'tdesign-react';
import 'tdesign-react/es/style/index.css'
import {useState,useEffect} from 'react'
import {useNavigate} from 'react-router-dom'
import axios from 'axios';
import './Home.css'
const { MenuItem } = Menu;
const { Content, Footer, Aside } = Layout
function Home() {
    const [active, setActive] = useState('0');
    let navigate = useNavigate()
    const [percent, setPercent] = useState(0);
    let [list,setlist]=useState([])
    let [flag,setflag]=useState(false)
    let [flag2,setflag2]=useState(false)
    let [value,setvalue]=useState('')
    let [value2,setvalue2]=useState('')
    let [value3,setvalue3]=useState('')
    let [list2,setlist2]=useState([])
    let [list3,setlist3]=useState([])
    let [id,setid]=useState([])
    let [show,setshow]=useState(false)

    useEffect(()=>{
        getcate()
        getlist()
        getlist2()
    },[])

    let getcate=async()=>{
        let {data}=await axios.get('http://localhost:3000/datacate')
        console.log(data);
        if(data.code==200){
            setlist(data.data)
        }
    }
    let addlist=async()=>{
        let {data}=await axios.post('http://localhost:3000/addlist',{title:value3,cate:id})
        console.log(data);
        if(data.code==200){
            setflag(false)
            setshow(false)
            setvalue('')
            getlist()
        }
    }
    let getlist=async()=>{
        let {data}=await axios.get('http://localhost:3000/datalist')
        console.log(data);
        if(data.code==200){
            setlist2(data.data)
        }
    }
    let getlist2=async()=>{
        let {data}=await axios.get('http://localhost:3000/datalist2')
        console.log(data);
        if(data.code==200){
            setlist3(data.data)
        }
    }
    let addlist2=async(val)=>{
        let {data}=await axios.post('http://localhost:3000/addlist2',{title:value,cate:id,list:val})
        console.log(data);
        if(data.code==200){
            setflag2(false)
            setvalue('')
            setflag(false)
            getlist2()
        }
    }


    let dellist=async(id)=>{
        let {data}=await axios.post('http://localhost:3000/dellist',{_id:id})
        console.log(data);
        if(data.code==200){
            getlist()
        }
    }

    let changestatus=async(id)=>{
        // console.log(id);
        
        let {data}=await axios.post('http://localhost:3000/changestatus',{_id:id})
        console.log(data);
        if(data.code==200){
            getlist2()
        }
    }
  return (
    <div className="App">
      <Layout>
        <Aside>
                <Button onClick={()=>navigate('/list')}>添加项目</Button>
                <Menu
                    value={active}
                    onChange={(v) => setActive(v)}
                    logo={<img src="https://tdesign.gtimg.com/site/baseLogo-light.png" height="28" alt="logo" />}
                    style={{
                    marginRight: 20,
                    }}
                >   
                    {
                        list.map((item,index)=>{
                            return <MenuItem key={index} value={item._id} onClick={()=>setid(item._id)}>{item.name}</MenuItem>
                        })
                    }
                </Menu>
        </Aside>
        <Layout>
          <Content>
            <div style={{height:'650px',display:'flex'}}>
                    {
                        list2.map((item,index)=>{
                            return id===item.cate?<>
                                 <Card key={item._id} title={item.title} actions={<a onClick={()=>dellist(item._id)}>删除</a>} bordered headerBordered style={{width:'230px',height:'200px',marginRight:'20px',marginTop:'20px'}}>
                                 <Progress label={true} size={"small"} percentage={list3.filter((item2)=>item2.list===item._id).filter((item2)=>item2.isCheck===true).length/list3.filter((item2)=>item2.list===item._id).length*100}></Progress>
                                <div>
                                    {
                                        list3.filter((item2)=>item2.list===item._id).map((item2,index)=>{
                                            return <div key={item2._id} className='list'>
                                            <Checkbox checked={item2.isCheck} onChange={()=>changestatus(item2._id)}>
                                          </Checkbox>{item2.title}
                                          </div>
                                        })
                                    }
                                </div>
                                <Button className={flag?'isShow':'isShow2'} onClick={()=>{setflag2(true),setflag(true)}}>新建</Button>
                                <div  className={flag2?'isShow2':'isShow'}>
                                    <Input placeholder="请输入内容"
                                        value={value}
                                        clearable
                                        onChange={(value) => {
                                            setvalue(value);
                                        }}
                                        onClear={() => {
                                            setvalue('');
                                        }}
                                    >

                                    </Input>
                                    <Button theme="primary" onClick={()=>addlist2(item._id)}>添加</Button>
                                    <Button theme="primary" variant="outline" onClick={()=>{setflag2(false),setvalue(''),setflag(false)}}>
                                    取消
                                    </Button>
                                </div>
                            </Card>
                            </>:<></>
                            
                        })
                        
                    }
                    <Button onClick={()=>{setshow(true)}}>新建</Button>
                    <Card
                        title="添加"
                        actions={
                            <a
                            href={null}
                            style={{
                                cursor: 'pointer',
                            }}
                            >
                            操作
                            </a>
                        }
                        bordered
                        headerBordered
                        style={{
                            width: '200px',
                            height:'200px'
                        }}
                        className={show?'isShow2':'isShow'}
                        >
                        <Input 
                            placeholder="请输入内容"
                            value={value3}
                            clearable
                            onChange={(value) => {
                                setvalue3(value);
                            }}
                            onClear={() => {
                                setvalue3('');
                            }}>

                        </Input>
                        <Button theme="primary" onClick={addlist}>添加</Button>
                        <Button theme="primary" variant="outline" onClick={()=>{setvalue3(''),setshow(false)}}>
                            取消
                        </Button>

                    </Card>
            </div>
          </Content>
          <Footer>Copyright @ 2019-2020 Tencent. All Rights Reserved</Footer>
        </Layout>
      </Layout>
    </div>
  );
}

export default Home;